<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var standard = null;
	
	/**
	 * 기준으로 설정된 엘리먼트의 바로 앞에 선택된 버튼 삽입
	 */
	function insertBeforeStandard(element) {
		if (standard == null) {
			alert("기준을 먼저 선택해 주십시오!");
		} else {
			var parent = standard.parentNode;
			parent.insertBefore(element, standard);
		}
	}
	
	/**
	 * 선택된 버튼을 기준 엘리먼트로 설정
	 */
	function setStandard(element) {
		standard = element;
		document.getElementById('selected').innerHTML = element.innerHTML;
	}
</script>
</head>
<body>
	<div style="border: 5px solid black; height: 100px;">
		<button onclick="insertBeforeStandard(this);"> 1번 </button>
		<button onclick="insertBeforeStandard(this);"> 2번 </button>
		<button onclick="insertBeforeStandard(this);"> 3번 </button>
	</div>
	<div style="border: 1px solid black; height: 100px;">
		선택됨: <span id="selected"></span><br />
		<button onclick="setStandard(this);" name="one"> 기준1번 </button>
		<button onclick="setStandard(this);" name="two"> 기준2번 </button>
		<button onclick="setStandard(this);" name="three"> 기준3번 </button>
	</div>
</body>
</html>
